<template>
  <s-layout title="类目偏好">
    <view class="storeSetting-wrap" :style="`height: calc( 100vh - ${pageHeight}px)`">
      <view class="content">
        <view class="item" 
          v-for="item in typeItems" 
          :key="item.id"
          @tap="onChangeType(item.id)"
        >
          <view class="label">{{ item.lable }}</view>
          <view class="checked" :class="{ active: state.type === item.id }"></view>
        </view>
      </view>
    </view>
  </s-layout>
</template>
<script setup>
import sheep from '@/sheep';
import { onLoad } from '@dcloudio/uni-app';
import { computed, reactive } from 'vue';
import { isEmpty } from 'lodash';

const typeItems = [
  {
    lable: '全品类',
    id: 1
  },
  {
    lable: '服饰内衣',
    id: 2
  },
  {
    lable: '食品饮料',
    id: 3
  },
]

const state = reactive({
  type: 1
});

const pageHeight = computed(() => {
  console.log(sheep.$platform.device.statusBarHeight, 'statusBarHeight')
  console.log(sheep.$platform.device.safeAreaInsets.bottom, 'safeAreaInsets')
  return sheep.$platform.device.statusBarHeight + sheep.$platform.device.safeAreaInsets.bottom + 44 + 32
})

const onChangeType = id => {
  console.log(id, 'id')
  state.type = id
}


onLoad(() => {
  console.log('');
});

</script>
<style lang='scss' scoped>
.storeSetting-wrap {
  background-color: #eee;
  padding-top: 32rpx;
  .content {
    margin: 0 32rpx;
  }
  .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    border-bottom: 2rpx solid #f2f2f2;
    font-size: 28rpx;
    color: #484848;
    padding: 27rpx 32rpx;
  }

  .checked {
    width: 22rpx;
    height: 22rpx;
    border: 2rpx solid #bfc5d2;
    // margin-left: 16rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s;

    // 选中时
    &.active {
      border-color: #e61a4f;
      &::after {
        content: '';
        width: 14rpx;
        height: 14rpx;
        background: #e61a4f;
        border-radius: 2rpx;
        display: block;
      }
    }
  }
  
}
</style>